import React from "react";
import { Row,Col, Menu, Icon,Button , Modal,Tabs,Form,Input,message } from 'antd';
import '../../static/css/pc/pc_header.css';
import {post} from "../../utils/http.js";
import {Link} from 'react-router';
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;

class PCHeader extends React.Component{
	constructor(){
		super();
		this.state={
			current:'toutiao',         
			isLogin:false,
			modalShow:false,
			action:'login',
			person:'未知',
			modalReset:false
		}
	}
	componentDidMount(){
		var username=localStorage.getItem('username');
		if(username){
			this.setState({
				person:username,
				isLogin:true
			})
		}
	}
	//
	changeMenuSelect(e){
		this.setState({
			current:e.key
		})
		if(e.key=='login'){
			this.showHideModel(true)
		}
	}
	//唤醒修改密码模态框
	handlerReset(e){
		this.showHideReset(true)
	}
	
	//登录注册的显示与隐藏
	showHideModel(flag){
		this.setState({
			modalShow:flag
		})
	}
	//修改密码的显示与隐藏
	showHideReset(flag){
		this.setState({
			modalReset:flag
		})
	}
	getTabKey(key){
		if(key=='1'){
			this.setState({
				action:'login'
			})
		}else if(key=='2'){
			this.setState({
				action:'register'
			})
		}	
	}
	//修改密码事件
	submitReset(e){
		e.preventDefault();//阻止默认事件(跳转)
		var formData=this.props.form.getFieldsValue();
		//console.log(formData);
		var id = localStorage.getItem("id");
		var username = localStorage.getItem("username");
		//先查询旧密码是否正确
		let result = post("http://localhost:3000/selectuser",{
				username:username
			})
			.then(res => {
				return res.json()
			})
			.then(json => {	
				if(json[0].password != formData.oldpassword){
					//新旧密码不一致
					message.info('新旧密码不一致,请重新输入原密码');
				}else{
					let result = post("http://localhost:3000/updateuser",{
						password:formData.resetpassword,
						id:id
					})
					.then(res => {
						return res.json()
					})
					.then(json => {
						//修改成功,应该重新登录
						message.info(json.msg);
						this.showHideReset(false);
						this.setState({
							isLogin:false
						})
					})
					//清除本地缓存
					localStorage.removeItem("username");
					localStorage.removeItem("id");
				}
			})			
	}
	submitEvent(e){
		e.preventDefault();//阻止默认事件(跳转)
		var formData=this.props.form.getFieldsValue();
		//console.log(formData);
		var action=this.state.action;
		if(action=='login'){
			//登录
			let username=formData.userName;
			let password=formData.password;
			let result = post("http://localhost:3000/selectuser",{
				username:formData.userName,
				password:formData.password
			})
			.then(res => {
				return res.json()
			})
			.then(json => {	
				if(json.msg){
					//暂未注册
					message.info(json.msg);
				}else{
					if(username==json[0].username&&password==json[0].password){
						this.showHideModel(false)
						this.setState({
							isLogin:true,
							person:json[0].username,
							id:json[0].id
						})
						//本地存储
						localStorage.setItem('username',json[0].username);
						localStorage.setItem("id",json[0].id);
					}else{
						message.info('用户名或密码不正确,请重新输入!');
					}
				}
			})
		}else if(action=='register'){
			let username=formData.reg_userName;
			let password=formData.reg_password;
			let apasswprd=formData.areg_password;
			
			let result1 = post("http://localhost:3000/selectuser",{
				username:formData.reg_userName
			})
			.then(res => {
				return res.json()
			})
			.then(json => {	
				if(json.msg){
					//暂未注册
					if(password==apasswprd){
						//注册
						let result = post("http://localhost:3000/adduser",{
							username:formData.reg_userName,
							password:formData.reg_password
						})
						.then(res => {
							return res.json()
						})
						.then(json => {	
							if(json.msg){
								//注册成功
								message.info(json.msg);
							}
						})
					}else{
						message.info('密码和确认密码不一致,请重新输入!');
					}	
				}else{
					message.info('用户名已存在,请重新输入!');
				}
			})
			
			
		}
	}
	logOut(){
		this.setState({
			isLogin:false
		})
		//清除本地缓存
		localStorage.removeItem("username");
		localStorage.removeItem("id");
	}
	render(){
		const { getFieldDecorator } = this.props.form;
		var {current,isLogin,modalShow,person,modalReset}=this.state;
		var showLogin=isLogin
					?
					<Menu.Item key='user' className='userInfo'>
						<Button type="primary" onClick={this.handlerReset.bind(this)}>{person}</Button>
						<Button>
							<Link to='/center'>个人中心</Link>
						</Button>
						<Button type="primary" onClick={this.logOut.bind(this)}>退出</Button>
					</Menu.Item>
					:
					<Menu.Item key='login' className='userInfo'>登录丨注册</Menu.Item>
		return(
			<div>
				<Row>
				    <Col span={2}></Col>
				    <Col span={20}>
				    	<Menu  onClick={this.changeMenuSelect.bind(this)} mode="horizontal"  selectedKeys={[current]} >
				    		<Menu.Item key='toutiao'>
				    			<Link to='/'>
				    				<Icon type="link" />头条
				    			</Link>   			
				    		</Menu.Item>
				    		<Menu.Item key='junshi'><Link to='/junshi'><Icon type="filter" />军事</Link></Menu.Item>
				    		<Menu.Item key='shehui'><Link to='/shehui'><Icon type="camera" />社会</Link></Menu.Item>
				    		<Menu.Item key='yule'><Link to='/yule'><Icon type="smile-o" />娱乐</Link></Menu.Item>
				    		<Menu.Item key='guoji'><Link to='/guoji'><Icon type="calculator" />国际</Link></Menu.Item>
				    		<Menu.Item key='guonei'><Link to='/guonei'><Icon type="rocket" />国内</Link></Menu.Item>	
				    		{showLogin}
				    	</Menu>
				    	<Modal visible={modalShow} onOk={() => this.showHideModel(false)}  onCancel={()=>this.showHideModel(false)}>
					        <Tabs defaultActiveKey="1" onChange={this.getTabKey.bind(this)}>
					        	<TabPane tab="登录" key="1">
							    	<Form onSubmit={this.submitEvent.bind(this)}>
							    		<FormItem>
							    			{getFieldDecorator('userName', {
									            rules: [{ required: true, message: 'Please input your username!' }],
									        })(
									            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
									        )}
							    		</FormItem>
							    		<FormItem>
							    			{getFieldDecorator('password', {
									            rules: [{ required: true, message: 'Please input your Password!' }],
									        })(
									            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
									        )}
							    		</FormItem>
							    		<Button type="primary" htmlType="submit">登录</Button>
							    	</Form>
							    </TabPane>
							    <TabPane tab="注册" key="2">
							    	<Form onSubmit={this.submitEvent.bind(this)}>
							    		<FormItem>
							    			{getFieldDecorator('reg_userName', {
									            rules: [{ required: true, message: 'Please input your username!' }],
									        })(
									            <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
									        )}
							    		</FormItem>
							    		<FormItem>
							    			{getFieldDecorator('reg_password', {
									            rules: [{ required: true, message: 'Please input your Password!' }],
									        })(
									            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
									        )}
							    		</FormItem>
							    		<FormItem>
							    			{getFieldDecorator('areg_password', {
									            rules: [{ required: true, message: 'Please input your Password!' }],
									        })(
									            <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
									        )}
							    		</FormItem>
							    		<Button type="primary" htmlType="submit">注册</Button>
							    	</Form>
							    </TabPane>  
							</Tabs>
					    </Modal>
					    {/*修改密码的模态框*/}
					    <Modal title={person} visible={modalReset} onOk={() => this.showHideReset(false)}  onCancel={()=>this.showHideReset(false)}>
							<Form onSubmit={this.submitReset.bind(this)}>
								<FormItem>
									{getFieldDecorator('oldpassword', {
						              	rules: [{ required: true, message: 'Please input your resetpassword!' }],
						            })(
						                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="text" placeholder="old password" />
						            )}
								</FormItem>
								<FormItem>
									{getFieldDecorator('resetpassword', {
						              	rules: [{ required: true, message: 'Please input your resetpassword!' }],
						            })(
						                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="text" placeholder="new password" />
						            )}
								</FormItem>
								<Button type="primary" htmlType="submit">确定</Button>
							</Form>
						</Modal>
				    </Col>
				    <Col span={2}></Col>
			    </Row>
			</div>
		)
	}
}
export default PCHeader = Form.create({})(PCHeader);
